{% extends "base.html" %}

{% block title %}File Upload - Flask Forms Demo{% endblock %}

{% block content %}
<h2>File Upload</h2>

<div class="row">
    <div class="col-md-6">
        <form method="POST" enctype="multipart/form-data">
            <div class="form-field">
                <label for="name" class="form-label">Name</label>
                <input type="text" class="form-control" id="name" name="name" 
                       value="{{ request.form.get('name', '') }}" required>
                {% if errors and errors.name %}
                    <div class="text-danger">{{ errors.name }}</div>
                {% endif %}
            </div>
            
            <div class="form-field">
                <label for="avatar" class="form-label">Profile Picture</label>
                <input type="file" class="form-control" id="avatar" name="avatar" accept="image/*">
                {% if errors and errors.avatar %}
                    <div class="text-danger">{{ errors.avatar }}</div>
                {% endif %}
                <div class="form-text">Upload a profile picture (JPG, PNG, GIF - max 2MB)</div>
            </div>
            
            <div class="form-field">
                <label for="documents" class="form-label">Documents</label>
                <input type="file" class="form-control" id="documents" name="documents" multiple>
                {% if errors and errors.documents %}
                    <div class="text-danger">{{ errors.documents }}</div>
                {% endif %}
                <div class="form-text">Upload documents (PDF, DOC, TXT - max 5MB each)</div>
            </div>
            
            <button type="submit" class="btn btn-primary">Upload</button>
            <a href="{{ url_for('index') }}" class="btn btn-secondary">Back</a>
        </form>
    </div>
    
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5>Uploaded Files</h5>
            </div>
            <div class="card-body">
                {% if uploaded_files %}
                    <h6>Successfully Uploaded:</h6>
                    <ul>
                    {% for file in uploaded_files %}
                        <li>{{ file.filename }} ({{ file.size }} bytes)</li>
                    {% endfor %}
                    </ul>
                {% else %}
                    <p>No files uploaded yet.</p>
                {% endif %}
            </div>
        </div>
        
        <div class="card mt-3">
            <div class="card-header">
                <h5>File Upload Information</h5>
            </div>
            <div class="card-body">
                <p>Key considerations for file uploads:</p>
                <ul>
                    <li>Set <code>enctype="multipart/form-data"</code> on forms</li>
                    <li>Validate file types and sizes</li>
                    <li>Sanitize filenames</li>
                    <li>Store files securely</li>
                    <li>Implement proper error handling</li>
                </ul>
                <p>Access uploaded files with <code>request.files</code></p>
            </div>
        </div>
    </div>
</div>
{% endblock %}